import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import AnimationCount from 'react-count-animation';
import ReactEcharts from 'echarts-for-react';

import ItemInfo from '../../common/ItemInfo';
import { LAST_CHART_PAR } from '../../config/echarts.config';

const settings = {
    start: 0,
    useGroup: true,
    animation: 'up',
}
const styleList = [
    "rotateY(0deg)", 
    "rotateY(30deg)", 
    "rotateY(15deg)"
];

class SystemInfo extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {

        };
        _.bindAll(this, [
        ]);
    }

    render() {
        let props = this.props;
        return (
            <div className="back-img">
                <ItemInfo title="大数据智能系统">
                    <div className="tab-bg">
                        <div>
                            <div className="money-sum">拒绝原因Top 4</div>
                            <div className="square-list"><i></i><i></i><i></i></div>
                        </div>
                        <div className="sys-box">
                            {
                                _.map([1,2,3], (val, key)=>{
                                    return <div key={key} className="sys-card"  style={{transform: styleList[key]+" translateZ(300px)"}}>
                                        <p><span className="sys-label">预警时间：</span><span className="sys-val">2018-04-08  16:43</span></p>
                                        <p><span className="sys-label">所属城市：</span><span className="sys-val">广东省东莞市</span></p>
                                        <p><span className="sys-label">用户名：</span><span className="sys-val">test1</span></p>
                                        <p><span className="sys-label">命中信息：</span><span className="sys-val">多头借贷</span></p>
                                    </div>
                                })
                            }
                        </div>
                    </div>
                </ItemInfo>
                <ItemInfo title="大数据智能系统">
                    <div className="tab-bg">
                        <div>
                            <div className="money-sum">拒绝原因Top 4</div>
                            <div className="square-list"><i></i><i></i><i></i></div>
                        </div>
                        <div className="sys-box">
                            {
                                _.map([1,2,3], (val, key)=>{
                                    return <div key={key} className="sys-card"  style={{transform: styleList[key]+" translateZ(300px)"}}>
                                        <p><span className="sys-label">预警时间：</span><span className="sys-val">2018-04-08  16:43</span></p>
                                        <p><span className="sys-label">所属城市：</span><span className="sys-val">广东省东莞市</span></p>
                                        <p><span className="sys-label">用户名：</span><span className="sys-val">test1</span></p>
                                        <p><span className="sys-label">命中信息：</span><span className="sys-val">多头借贷</span></p>
                                    </div>
                                })
                            }
                        </div>
                    </div>
                </ItemInfo>
                <ItemInfo>
                    <div className="tab-bg m-t-30">
                        <div>
                            <div className="money-sum">拒绝原因Top 4</div>
                            <div className="square-list"><i></i><i></i><i></i></div>
                        </div>
                        <p className="tab-th"><span>拒绝原因</span><span>原因占比</span><span>命中次数</span></p>
                        <div className="sys-tab">
                            <span><i>1</i>多头借贷</span><span>74%</span><span><AnimationCount {...settings} count={923155} duration={1500} /></span>
                            <span><i>2</i>存在预期信息</span><span>74%</span><span><AnimationCount {...settings} count={923155} duration={1500} /></span>
                            <span><i>3</i>芝麻分过低</span><span>74%</span><span><AnimationCount {...settings} count={923155} duration={1500} /></span>
                            <span><i>4</i>身份冒用</span><span>74%</span><span><AnimationCount {...settings} count={923155} duration={1500} /></span>
                        </div>
                    </div>
                </ItemInfo>
                <ItemInfo>
                    <div className="tab-bg m-t-30">
                        <div>
                            <div className="sys-sum">模型效果</div>
                            <div className="square-list"><i></i><i></i><i></i></div>
                            <div className="title-box">
                                <div className="sys-title1"><i></i><span>分布</span></div>
                                <div className="sys-title2"><span className="icon-box"><i></i></span><span>流失概率</span></div>
                            </div>
                            <div className="tab-box">
                                <ReactEcharts 
                                    option = { LAST_CHART_PAR }
                                    style={{ height: 148 }}
                                />
                            </div>
                        </div>
                    </div>
                </ItemInfo>
            </div>
        )
    }
}

SystemInfo.propTypes = {
    name: PropTypes.string
}
export default SystemInfo;